<template>
  <div class="mod-config" id="mod-config-id" >
    <div class="div-s" id="div-s-id">
    </div>
    <div class="div-e" id="div-e-id">
      <div class="div-e-head" id="div-e-title-id">
      </div>
      <div class="div-e-tabs" id="div-e-tabs-id">
      </div>
      <div class="div-e-body" id="div-e-table-id">
      </div>
      <div class="div-e-foot" id="div-e-paging-id">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BasePaging',
  data () {
    return {
      modConfigHeight: 0,
      modHeight: {height: ''},
      queryInfo: {
        pageIndex: 1,
        pageSize: 20
      },
      inOrder: '',
      orderBy: '',
      table: {
        dataList: [],
        tableHeight: 586,
        dataListLoading: false
      },
      isUnfold: false,
      totalPage: 1,
      deleteDialogVisible: false
    }
  },

  mounted () {
    this.$nextTick(() => {
      let out = this
      setTimeout(function () {
        out.initHeight()
      }, 200)
    })

    window.onresize = () => {
      this.initHeight()
    }

    this.mountedHandle()
  },
  activated () {
    this.paging()
  },

  methods: {
    mountedHandle () {
    },

    initHeight () {
      let topHeight = 46
      let divHeight = document.documentElement.clientHeight - topHeight

      this.setContainerSize(divHeight)
      this.adjustTableHeight()
    },

    setContainerSize (val) {
      this.modConfigHeight = val
      this.modHeight.height = this.modConfigHeight + 'px'
    },
    getModConfigHeight (margin = 0, padding = 0) {
      return this.modConfigHeight + margin - padding
    },
    getDivEPagingHeight (margin = 0) {
      let div = document.getElementById('div-e-paging-id')
      let divHeight = 70
      if (div) {
        divHeight = div.offsetHeight + 38
      }
      if (!divHeight) {
        divHeight = 0
      }
      return divHeight + margin
    },
    getDivETitleHeight (margin = 0) {
      let div = document.getElementById('div-inquire-id')
      let divHeight = 45
      if (div) {
        divHeight = div.offsetHeight
      }
      if (!divHeight) {
        divHeight = 0
      }
      return divHeight + margin
    },
    getDivSHeight (margin = 0) {
      let div = document.getElementById('div-s-id')
      let divHeight = 52
      if (div) {
        divHeight = div.offsetHeight
      }
      if (!divHeight) {
        divHeight = 0
      }
      return divHeight + margin
    },
    getOtherHeight (val = 0) {
      if (val) {
        val = 0
      }
      return val
    },
    getNotTableHeight () {
      let searchHeight = this.getDivSHeight(0)
      let otherHeight = this.getDivETitleHeight(0) + this.getDivEPagingHeight(0) + this.getOtherHeight(0)
      return searchHeight + otherHeight
    },
    // table组件高度设置
    adjustTableHeight () {
      this.table.tableHeight = this.getModConfigHeight(0) - this.getNotTableHeight() - 45 - 5
    },

// 搜索
    // 点击搜索
    clickSearch () {
      this.queryInfo.pageIndex = 1
      this.paging()
    },

    // 点击重置
    clickReset () {},

    // 点击展开
    clickUnfold (shrinkHeight = 52) {
      this.isUnfold = false
      this.$nextTick(() => {
        this.initHeight()
      })
    },

    // 点击收起
    clickFold (stretchHeight = 52) {
      this.isUnfold = true
      this.$nextTick(() => {
        this.initHeight()
      })
    },

    // 改变展开状态
    turnFoldState () {
      this.isUnfold = !this.isUnfold
      this.$nextTick(() => {
        this.initHeight()
      })
    },

// 分页
    // 点击选择分页大小
    changePageSize (pageSize) {
      this.queryInfo.pageSize = pageSize
      this.queryInfo.pageIndex = 1
      this.paging()
    },

    // 选择前往固定页
    turnToPage (pageIndex) {
      this.queryInfo.pageIndex = pageIndex
      this.paging()
    },

    // 点击数据导出
    clickExport () {},

    // 点击数据导入
    clickImport () {},

    // 点击新增（一个）
    clickAdd () {},

    // 点击显示删除对话框
    showDeleteDialog () {
      this.deleteDialogVisible = true
    },

    // 点击确认删除
    clickDelete () {},

    // 点击确认删除（批量）
    clickDeleteBatch () {},

    // 点击修改
    clickUpdate () {},

    // 分页数据查询
    paging () {},

    cellStyle () {
      return {
        height: '48px'
      }
    },

    sortChange (column) {
      // console.log(column);
      this.orderBy = column.prop
      // console.log(this.orderBy);
      if (column.order === 'ascending') {
        this.inOrder = 'asc'
      } else if (column.order === 'descending') {
        this.inOrder = 'desc'
      } else {
        this.orderBy = ''
        this.inOrder = ''
      }
      this.clickSearch()
    }

  }
}
</script>

<style lang="less" scoped>
.mod-config{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 15px !important;
  background-color: #F5F7FA !important;
}

.div-s{
  padding: 0 15px;
  flex: 0;
  background-color: #FFFFFF;
}

.div-e{
  padding:0 15px 15px 15px;
  margin-top: 15px;
  flex: 1 1;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
}
</style>


<style lang="less" src="../../style/paging.scss" scoped>
</style>

<style lang='less'>
.el-popover.popper-style {
  min-width: 50px !important;
}

.el-popper.popper-style {
  margin-top: 0;
}

</style>
